<template>
	<view>
		<u-navbar back-text="开仓" :backTextStyle="backTextColor" backIconColor="#fff" :background="background">
			<view style="text-align: center; width: 100%;">
				<text class="nav-title">{{itemTitle}}</text>
			</view>
		</u-navbar>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item ref="uHouse" :index="index" :title="item.typeName " :arrow="false" :key="index" v-for="(item,index) in waitingHouseList" @click="itemClick(item.typeName)" :bg-color="item.bgColor" >
					<!-- <u-checkbox  @change="checkboxChange"  v-model="item.checked" :name="item.weight"></u-checkbox> -->
					<u-tag :text="item.weight" :type="item.isActive ? 'success' : 'warning'" />
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			waitingHouseList: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		
		data() {
			return {
				background: this.TopColor,
				keyword:'',
				backTextColor: {
					'color': '#ffffff'
				},
				actionStyle:{
					'color':'#FC0099',
				},
				itemTitle:"",
				checked: false,
				isActive: false,
			}
		},
		onLoad(e) {
			this.itemTitle = e.title;
			this.id = e.id;
		},
		mounted() {
			this.apiWaitingHouseList();
		},
		methods:{
			itemClick(typeName) {
				this.waitingHouseList = this.waitingHouseList.map(item => 
					item.typeName ===  typeName ? {...item,isActive:!item.isActive} : item
				)
			},
			checkboxChange(){
				
			},
			apiWaitingHouseList(){
				this.list = [];
				this.$api.post("/kim/queryCastingTypeList.action",{}).then(res => {
					console.log("waiting: ",res);
					this.waitingHouseList = res;
					this.waitingHouseList.forEach((vm,index) => {
						vm.isActive = false;
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #FC0099;
	}
	.tag{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.nav-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
	}
	.u-cell-item {
	  padding: 12px 16px;
	  border-bottom: 1px solid #eee;
	  transition: background-color 0.2s ease;
	}
	
	.u-cell-item.active {
	  background-color: #e8f3ff;
	}
</style>
